<template>
  <div id="app">
    <div class="nav">
      <ul>
        <router-link v-for="(item, index) in arr" :key="index" :to="item.routerPath">
          {{item.routerName}}
          <br><br><br>
        </router-link>
      </ul>
    </div>
    <div class="view-box">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data() {
    return {
      active: '/Hello',
      arr: [{
          routerName: '我是hello组件',
          routerPath: '/Hello'
        },
        {
          routerName: '我是world组件',
          routerPath: '/world'
        }
      ]
    }
  },
  created(){
    // 我这里为了测试，没有在router/index.js 里面配置 入口默认文件，默认可以将/Hello修改为 / 
    this.$router.push('/Hello')
  }
}
</script>
<style scoped>
.router-link-active {
  color: blue;
}

.nav {
  width: 100%;
}

.view-box {
  width: 100%;
}

ul a {
  color: #333;
}

</style>
